import { Component, Input, OnInit, Output, ViewContainerRef, EventEmitter } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { OrganizationInfo } from 'src/app/models';
import { AddImageModalComponent } from './add-image-modal/add-image-modal.component';

@Component({
  selector: 'zepride-org-image-list',
  templateUrl: './org-image-list.component.html',
  styleUrls: ['./org-image-list.component.less']
})
export class OrgImageListComponent implements OnInit {
  @Input() orgInfo: OrganizationInfo;
  @Output() orgChanged = new EventEmitter<any>();
  constructor(
    private modal: NzModalService,
    private viewContainerRef: ViewContainerRef,
    private msg: NzMessageService
  ) {
    this.orgInfo || (this.orgInfo = <any>{
      imageList: [],
      orgTree: {}
    })
  }

  ngOnInit(): void {
  }

  orgImageMouseEnter(item) {
    item.showImageMask = true;
  }

  orgImageMouseLeave(item) {
    item.showImageMask = false;
  }

  async deletImage(item) {
    this.modal.confirm({
      nzTitle: `是否要删除图片【${item.name}】`,
      nzContent: `即将删除图片信息。`,
      nzOkText: '删除',
      nzOkType: 'danger',
      nzOnOk: async () => {
        let index = this.orgInfo.imageList.findIndex(x => x.uid == item.uid);
        if (index > -1) {
          this.orgInfo.imageList.splice(index, 1);
          this.orgChanged.emit();
        }
      },
      nzCancelText: '取消',
      nzOnCancel: () => {}
    });
  }

  addOrgImage() {
    const modal = this.modal.create({
      nzTitle: '添加企业证照',
      nzContent: AddImageModalComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzComponentParams: {
        // organizationId: this.orgId
      },
      nzFooter: null
    });

    modal.afterClose.subscribe((result) => {
      if (result) {
        this.orgInfo.imageList || (this.orgInfo.imageList = []);
        this.orgInfo.imageList = this.orgInfo.imageList.concat(result);
        console.log(this.orgInfo);
        this.orgChanged.emit();
      }
    })
  }
}
